<!-- 邮件资源 -->
<template>
  <div  class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px 16px; margin-bottom: 32px">
      <div class="content parameType" style="width: 100%">
        <div class="certification top"  style="width: 100%">
          <div class="toptitle">
            <div class="title">内部群发邮箱配置</div>
            <!-- <i :class="!formshow ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i> -->
            <!-- <div class="tabclick"  @click="formshow = !formshow" >
              <div class="tabitem">
                <span><i :class="formshow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span>
              </div>
            </div> -->
          </div>
          <el-form label-width="160px" v-show="formshow">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-form-item label="发送邮箱:">
                <el-input v-model="emailForm.FromAccount"  style="width:300px" ></el-input>
              </el-form-item>
              <p style="color:#2491fc">请尽量填写公司销售或者行政邮箱，邮箱通知会使用这个邮箱发送邮件</p>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="24">
              <el-form-item label="邮箱密码:">
                <el-input v-model="emailForm.Pwd"  style="width:300px"  oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" :maxlength="32"></el-input>
              </el-form-item>
              <p v-show="IsActivePwd === 0">请输入邮箱密码</p>
              <p v-show="IsActivePwd === 1">请使用激活密码</p>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="24">
              <el-form-item label="邮箱服务器:">
                <el-autocomplete 
                popper-class="my-autocomplete" 
                class="inline-input" 
                style="width:300px" 
                v-model="emailForm.SmtpServer" 
                :fetch-suggestions="querySearch" 
                placeholder="请输入邮箱服务器"
                oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" 
                :maxlength="32"
                @select="emailchange">
                  <template slot-scope="{ item }">
                    <div class="name">{{ item.SmtpServer }}</div>
                    <span class="addr">{{ item.NickName }}</span>
                  </template>
                </el-autocomplete>
              </el-form-item>
              <p>加密通讯：<el-switch v-model="emailForm.IsOpenSSL" active-color="#2491fc" inactive-color="#ccc" :active-value= 1 :inactive-value= 0></el-switch></p>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="24">
              <el-form-item label="接收邮箱:">
                <el-input v-model="emailForm.ToAccount"  style="width:300px"></el-input>
              </el-form-item>
              <p>可以和发件邮箱配置为同一个邮箱</p>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="24">
              <el-form-item label="发件人昵称:">
                <el-input v-model="emailForm.SendNickName" style="width:300px"></el-input>
              </el-form-item>
              <p>发件人显示昵称：<el-switch v-model="emailForm.IsAddCorpNameToSendAccount" active-color="#2491fc" inactive-color="#ccc" :active-value = 1 :inactive-value = 0></el-switch></p>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="24">
              <el-form-item label="邮件通知执行时间点:">
                <!-- <el-autocomplete class="inline-input" style="width:300px" v-model="emailForm.ExecHours" :fetch-suggestions="querySearch2" placeholder="请输入时间"></el-autocomplete> -->
                <el-select v-model="emailForm.ExecHours"  style="width:300px">
                  <el-option :value = 0 label="不限制时间点"></el-option>
                  <el-option v-for="item in 24" :key="item" :value=item :label="item+':00'"></el-option>
                </el-select>
              </el-form-item>
              <!-- <p>（0表示不限制时间点，否则为配置的时间点执行）</p> -->
            </el-col>
            <el-col :xs="24" :sm="24" :lg="24">
              <el-form-item label="邮件发送延迟:">
                <!-- type="number" -->
                <el-input 
                  v-model.number="emailForm.SendInterval"  
                  :maxlength="10" 
                  style="width:300px">
                </el-input>
              </el-form-item>
              <p>（0表示不延迟，单位秒）</p>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="24">
              <el-button type="primary" @click="TestMailGlobal(emailForm,1)"  style="margin-left:550px;">发送测试邮件</el-button>
              <el-button type="primary" @click="SetParamMailGlobal(emailForm)"  style="margin-left:10px">保存</el-button>
            </el-col>
          </el-form>
        </div>
      </div>
      <!-- <div class="parameType">
      <div>
        <div class="title" >群发邮件共享资源（请处于正常状态下账号必须超过100个，否则部分功能可能无法使用）</div>
      </div>
        <div class="btn">
          <el-button type="primary" icon='el-icon-circle-plus-outline' @click="addResources()">添加资源</el-button>
          <el-button type="primary" icon='el-icon-finished' @click="importResources()">导入资源</el-button>
          <el-button type="primary" icon='el-icon-download' @click="DownloadFile()">下载模板</el-button>
          <el-button type="primary" icon='el-icon-magic-stick' @click="TestAllMailGlobal()">测试全部账号</el-button>
          <input style="display:none" type="file" ref="upfile" @change="changefile($event)" accept=".xls,.xlsx">
        </div>
        <el-table stripe border :data="tableData" style="width: 100%; margin-top: 15px">
          <el-table-column label="序号"  width="60" type="index" :index='(index)=>{return (index + 1) + (this.pageNum - 1)*this.pageSize}'> </el-table-column>
          <el-table-column label="申请人员" prop="Name" align="left" width="120px"></el-table-column>
          <el-table-column label="邮箱" prop="Account" align="left"></el-table-column>
          <el-table-column label="密码" prop="Pwd" align="left"></el-table-column>
          <el-table-column label="邮箱服务器" prop="SmtpServer" align="left" ></el-table-column>
          <el-table-column label="开启加密" prop="IsOpenSSL" align="left" ></el-table-column>
          <el-table-column label="最近测试时间" prop="LastCheckTime" align="left" ></el-table-column>
          <el-table-column label="状态" show-overflow-tooltip align="left" width="80px">
            <template slot-scope="scope">
              <p style="color:#909399" v-if="scope.row.Status === 0">初始</p>
              <p style="color:#67C23A" v-if="scope.row.Status === 1">正常</p>
              <p style="color:#F56C6C" v-if="scope.row.Status === 2">异常</p>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" width="220px">
            <template slot-scope="scope">
              <el-button size="mini" @click="changeMailGlobal(scope.row)">修改</el-button>
              <el-button size="mini" type="danger" @click="deleteMailGlobal(scope.row)">删除</el-button>
              <el-button size="mini" type="success" @click="TestMailGlobal(scope.row,2)">测试</el-button>
            </template>
          </el-table-column>
        </el-table>
        </div> -->
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape=false
      :title="Action === 1 ? '添加资源' : '修改资源' "
      :visible.sync="dialogVisible"
      v-el-drag-dialog
      width="30%">
      <el-form label-width="120px" :model="resourceForm" :rules="rules" ref="resourceForm">
        <el-form-item label='申请人员:' prop="Name">
          <el-input v-model="resourceForm.Name"></el-input>
        </el-form-item>
        <el-form-item label='邮箱:' prop="Account">
          <el-input v-model="resourceForm.Account" :disabled="Action === 2"></el-input>
        </el-form-item>
        <el-form-item label='密码:' prop="Pwd">
          <el-input v-model="resourceForm.Pwd"></el-input>
        </el-form-item>
        <el-form-item label="邮箱服务器:" prop="SmtpServer">
          <el-autocomplete class="inline-input" style="width:100%" v-model="resourceForm.SmtpServer" :fetch-suggestions="querySearch" placeholder="请输入邮箱服务器">
            <template slot-scope="{ item }">
              <div class="name">{{ item.SmtpServer }}</div>
              <span class="addr">{{ item.NickName }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="是否开启加密:">
          <el-switch v-model="resourceForm.IsOpenSSL" active-color="#2491fc" inactive-color="#ccc" :active-value = 1 :inactive-value = 0></el-switch>
        </el-form-item>
        <el-form-item label='状态:' prop="Status" v-show="Action !== 1">
          <span style="color: #909399" v-show="resourceForm.Status === 0">初始</span>
          <span style="color: #67C23A" v-show="resourceForm.Status === 1">正常</span>
          <span style="color: #F56C6C" v-show="resourceForm.Status === 2">异常</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape=false
      title="请选择要导入的人员(已自动清除重复邮箱和错误邮箱)"
      ref="multipleTable"
      :visible.sync="importdialog"
      v-el-drag-dialog
      @close=importdialogclose
      width="70%">
      <el-table stripe border @selection-change="handleSelectionChange" :data="importList" height='500' style="width: 100%; margin-top: 15px;padding-bottom:15px;">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号"  width="60" type="index" :index='(index)=>{return (index + 1) + (this.pageNum - 1)*this.pageSize}'> </el-table-column>
        <el-table-column label="申请人员" prop="Name" align="left" width="120px"></el-table-column>
        <el-table-column label="邮箱" prop="Account" align="left"></el-table-column>
        <el-table-column label="密码" prop="Pwd" align="left"></el-table-column>
        <el-table-column label="邮箱服务器" prop="SmtpServer" align="left" ></el-table-column>
        <el-table-column label="是否加密（0：不加密，1：加密）" prop="IsOpenSSL" align="left" ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importdialog = false;">取 消</el-button>
        <el-button type="primary" @click="submitImport()">确认导入</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { connrequest, downloadfile } from '@/api/firstPage'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import XLSX from 'xlsx'
import { parseTime } from '@/utils'
export default {
directives: { elDragDialog },
data() {
  return {
    pageNum: 1,
    pageSize: 10,
    total: 10,
    tableData: [],
    emailForm: {FromAccount:''},
    emailList: [],
    mailsuffix: [
    {suffix:'gmail.com', SmtpServer:'smtp.gmail.com:587'},
    {suffix:'aliyun.com',SmtpServer:'smtp.aliyun.com'},
    {suffix:'sina.com',SmtpServer:'smtp.sina.com.cn'},
    {suffix:'qq.com',SmtpServer:'smtp.qq.com'},
    {suffix:'tom.com',SmtpServer:'smtp.tom.com'},
    {suffix:'163.com',SmtpServer:'smtp.163.com'},
    {suffix:'126.com',SmtpServer:'smtp.126.com'},
    {suffix:'yahoo.com',SmtpServer:'smtp.mail.yahoo.com'},
    {suffix:'yahoo.com.cn',SmtpServer:'smtp.mail.yahoo.com.cn:587'},
    {suffix:'foxmail.com',SmtpServer:'smtp.foxmail.com'},
    {suffix:'sohu.com',SmtpServer:'smtp.sohu.com'},
    {suffix:'outlook.com',SmtpServer:'smtp-mail.outlook.com:587'},
    {suffix:'139.com',SmtpServer:'smtp.139.com'},
    {suffix:'china.com',SmtpServer:'smtp.china.com'}],
    importList:[],
    choseList:[],
    dialogVisible: false,
    importdialog: false,
    formshow:true,
    IsActivePwd: 0,
    rules: {
      Name:[
        { required: true, message: "请输入申请人员"}
      ],
      Account:[
        { required: true, message: "请输入邮箱"},
        {
          validator: function(rule, value, callback) {
            if (/^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(value) == false  && value) {
              callback(new Error("邮箱格式错误"));
            } else {
              callback();
            }
          },
          trigger: "blur"
        }
      ],
      Pwd:[
        { required: true, message: "请输入密码"},
        {
          validator: function(rule, value, callback) {
            if (/^[^\u4e00-\u9fa5 ]{0,}$/.test(value) == false  && value) {
              callback(new Error("邮箱密码不能有中文或空格"));
            } else {
              callback();
            }
          },
          trigger: "blur"
        }
      ],
      SmtpServer:[
        { required: true, message: "请输入邮箱服务器"}
      ],
      Status:[
        { required: true, message: "请选择状态"}
      ]
    },
    resourceForm: {},
    Action: 1
  }
},
  watch: {
    'emailForm.FromAccount': {
      handler: function(value){
        if(value !== '' && this.emailList.length > 0){
          let mail = value.split("@")[1]
          this.$set(this.emailForm, 'SmtpServer', this.mailsuffix.find( item => item.suffix === mail )?.SmtpServer || this.emailForm.SmtpServer)
          this.emailchange(this.emailList.find( item => item.Mail === mail))
        }
      },
      deep: true
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.GetParamMailGlobal()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.GetEMailSmtpCfg()
  },
  methods: {
    importResources(){
      this.$refs.upfile.click()
    },
    handleSelectionChange(val){
      this.choseList = val
    },
    AccountChange(row){
      if(this.emailForm.SmtpServer !== ''){
        let mail = row.split("@")[1]
        this.$set(this.emailForm, 'SmtpServer', this.emailList.find( item => item.Mail === mail)?.SmtpServer || '')
        this.emailchange(this.emailList.find( item => item.Mail === mail))
      }
    },
    submitImport(){
      let success = 0
      let flag = 0;
      if(this.choseList.length === 0){
        this.$message.success('请先选择要导入的人员')
        return false
      }
      else{
        this.choseList.map(item=>{
          item.IsOpenSSL = item.IsOpenSSL === '加密' ? 1 : 0
          return item
        })
        this.choseList.forEach(async(item) => {
          let Detail = item
          const data = {
            Data:{
              Action: 1,
              Detail: {
                ...Detail,
                Status: 0
              }
            }
          }
          const res = await connrequest('EditMailAccounts', data)
          flag++
          if(res.Status.StatusCode === 0){
            success++
          }
          if(flag === this.choseList.length){
            this.$message({
              showClose: true,
              duration: 7000,
              type: success == this.choseList.length ? 'success' : 'error',
              message: `导入成功${success}个，失败${this.choseList.length - success}个`
            });
            this.importdialog = false
            this.$refs.upfile.value = ''
          }
        })
      }
    },
    importdialogclose(){
      this.choseList = []
      this.$refs.upfile.value = ''
    },
    async DownloadFile(){
      const data = {
        Data:{
          FileName: '邮件资源模板.xlsx'
        }
      }
      const res = await downloadfile('DownloadPublicFile', data)
      let blobUrl = window.URL.createObjectURL(new Blob([res]));
      const a = document.createElement('a');
      a.style.display = 'none';
      a.download = '邮件资源模板.xlsx';
      a.href = blobUrl;
      a.click();
    },
    changefile(e){
      this.choseList = []
      // 读取表格文件
      let that = this;
      const files = e.target.files;
      if (files.length <= 0) {
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$message({
          message: "上传格式不正确，请上传xls或者xlsx格式",
          type: "warning"
        });
        return false;
      } else {
        // 更新获取文件名
        that.upload_file = files[0].name;
      }
      const fileReader = new FileReader();
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary"
          });
          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
          this.da = [...ws]
          let arr = []
          this.da.map(v => {
            let obj = {}
            obj.Name = v['申请人员']
            obj.Account = v['邮箱']
            obj.Pwd = v['密码（需要开通SMTP一些邮件服务器需要为激活密码）']
            obj.SmtpServer = v['邮箱服务器']
            obj.IsOpenSSL = v['是否加密（0：不加密，1：加密）']
            arr.push(obj)
          })
          this.importList = [...arr]
          this.importList = this.unique(this.importList)  //删除exl的重复数据
          this.tableData.forEach(item => {  //删除和tableData重复数据
            this.importList = this.importList.filter(newitem => {
              return newitem.Account !== item.Account
            })
          })
          const email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
          this.importList = this.importList.filter(item => {
            return email.test(item.Account)
          })
          this.importdialog = true
        } catch (e) {
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
    },
    unique(arr){
      var obj = {};
      var newArr = arr.reduce((prev,cur)=>{
        obj[cur.Account] ? '':obj[cur.Account] = true && prev.push(cur);
        return prev
      },[]);
      return newArr
    },
    querySearch(queryString, cb) {
      var restaurants = this.emailList;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    async GetEMailSmtpCfg(){
      const res = await connrequest('GetEMailSmtpCfg')
      res.Data = res.Data || []
      res.Data.map(item=>{
        item.value = item.SmtpServer
      })
      this.emailList = [...res.Data]
      // let mail = this.emailForm.FromAccount.split("@")[1]
      // this.emailchange(this.emailList.find( item => item.Mail === mail))
    },
    querySearch2(queryString, cb) {
      let arr = []
      for (var i = 1; i <= 24; i++){
        arr.push({value: `${i}:00`})
      }
      var restaurants = arr;
      var results = queryString ? restaurants.filter(this.createFilter2(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter2(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    emailchange(row){
      // console.log(this.emailForm);
      // this.$set(this.emailForm, 'IsOpenSSL', this.emailForm?.IsOpenSSL || row?.IsOpenSSL || 0)
      this.IsActivePwd = row?.IsActivePwd || 0
    },
    addResources(){
      this.Action = 1
      this.resourceForm = {...{Status: 0}}
      this.$nextTick(()=>{
        this.$refs['resourceForm'].clearValidate()
      })
      this.dialogVisible = true
    },
    changeMailGlobal(row){
      this.Action = 2
      this.resourceForm = {...row}
      this.resourceForm.IsOpenSSL = row.IsOpenSSL === '加密' ? 1 : 0
      this.dialogVisible = true
    },
    deleteMailGlobal(row){
      this.Action = 3
      this.resourceForm = {...row}
      this.$confirm('此操作将删除该邮箱, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = {
          Data:{
            Action: this.Action,
            Detail: {
              ...this.resourceForm
            }
          }
        }
        const res = await connrequest('EditMailAccounts', data)
        if(res.Status.StatusCode === 0){
          this.$message.success('删除成功')
          this.dialogVisible = false
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    async GetParamMailGlobal(){
      const res = await connrequest('GetParamMailGlobal')
      this.emailForm = {...res.Data, SendInterval:res.Data?.SendInterval || 0}
    },
    async SetParamMailGlobal(){
      let number = /^[0-9]*$/ 
      let email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
      let regPwd = /^[^\u4e00-\u9fa5 ]{0,}$/
      if(!email.test(this.emailForm.FromAccount)){
        this.$message.error('发送邮箱格式不正确')
      }
      else if(this.emailForm.Pwd === ''){
        this.$message.error('邮箱密码不能为空')
      }
      else if(!regPwd.test(this.emailForm.Pwd)){
        this.$message.error('邮箱密码不能有中文或空格')
      }
      else if(this.emailForm.SmtpServer === ''){
        this.$message.error('邮箱服务器不能为空')
      }
      else if(!email.test(this.emailForm.ToAccount)){
        this.$message.error('接收邮箱格式不正确')
      }
      else if(this.emailForm.SendNickName === '' && this.emailForm.IsAddCorpNameToSendAccount === 1){
        this.$message.error('发件人昵称为空，无法设置显示昵称')
      }
      // else if(this.emailForm.FromAccount == this.emailForm.ToAccount){
      //   this.$message.error('接收邮箱不得和发送邮箱账号重复')
      // }
      else if(!number.test(this.emailForm.ExecHours) && this.emailForm.ExecHours* 1 > 24){
        this.$message.error('邮件通知执行时间点只能为小于24的数字')
      }else if(!number.test(this.emailForm.SendInterval)){
        this.$message.error('邮件发送延迟只能为数字')
      }
      else{
        this.emailForm.ExecHours = this.emailForm.ExecHours * 1
        this.emailForm.SendInterval = this.emailForm.SendInterval * 1 || 0
        const data = {
          Data:{
            ...this.emailForm
          }
        }
        const res = await connrequest('SetParamMailGlobal', data)
        if(res.Status.StatusCode === 0){
          this.$message.success('保存成功')
          this.GetParamMailGlobal()
        }
      }
    },
    submit(){
      this.$refs['resourceForm'].validate(async (valid) => {
        if(valid){
          const data = {
            Data:{
              Action: this.Action,
              Detail: {
                ...this.resourceForm
              }
            }
          }
          const res = await connrequest('EditMailAccounts', data)
          if(res.Status.StatusCode === 0){
            this.Action === 1 ? this.$message.success('添加成功') : this.$message.success('修改成功')
            this.dialogVisible = false
          }
        }
      })
    },
    async TestMailGlobal(row,status){
      let loading = this.$loading({
        lock: true,
        text: "加载中……",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let IsOpenSSL
      if(status === 1){
        IsOpenSSL = row.IsOpenSSL
      }
      if(status === 2){
        IsOpenSSL = row.IsOpenSSL === '加密' ? 1 : 0
      }
      const data = {
        Data:{
          FromAccount: this.emailForm.FromAccount,
          Pwd: row.Pwd,
          SmtpServer: row.SmtpServer,
          IsOpenSSL: IsOpenSSL,
          IsAddCorpNameToSendAccount: this.emailForm.IsAddCorpNameToSendAccount,
          SendNickName: this.emailForm.SendNickName,
          ToAccount: row.ToAccount || row.Account
        }
      }
      try {
        const res = await connrequest('TestMailGlobal', data)
        loading.close()
        if(res.Status.StatusCode === 0){
          this.$message.success('发送测试邮件正常')
        }else{
          this.$message.error('邮箱账号异常，发送测试邮件失败')
        }
      } catch (error) {
        loading.close()
      }
      
    },
    // async TestAllMailGlobal(){
    //   this.tableData.map( item => {
    //     this.TestMailGlobal(item)
    //   })
    // },
    handleSizeChange(){},
    handleCurrentChange(){}
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import "~@/styles/variables.scss";
.parameType .title{
  border: none !important;
}
.content {
  margin-top: 0;
  width: 800px;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .title{
    margin-bottom: 10px;
    border: none;
    cursor: pointer;
  }
  ::v-deep .certification{
    .toptitle{
      display: flex;
      // border-bottom: 1px solid #eceff5;
      // align-items: center;
      justify-content: space-between;
      // i{
      //   color: #409EFF;
      //   cursor: pointer;
      // }
    }
    .el-form-item{
      margin-bottom: 10px;
    }
    .el-col{
      display: flex;
      align-items: center;
      p{
        width: 100px;
        display:block;
        color: #aaa;
        font-size: 12px;
        padding-left: 20px;
        white-space: nowrap;
      }
    }
  }
}
.top{
  flex-wrap: nowrap;
}
.btn{
  margin: 20px 0;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;
    .name {
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 14px !important;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }
    .highlighted .addr {
      color: #ddd;
    }
  }
}

.tabclick{
  display: flex;
  height: 20px;
  justify-content: center;
  .tabitem{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content:center;
    padding: 2px 10px;
    width: 90px;
    font-size: 12px;
    color: #bbb;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    margin-right: 10px;
    transform:  perspective(2em) rotateX(-20deg);
    span{
      transform:  perspective(2em) rotateX(10deg);
    }
  }
}
.tabclick :hover{
  background: #f7f7f7;
}

</style>

<style>
input[type=number] {
  -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>